<template>
  <div>
    <div id="search_header">
          <i class="el-icon-arrow-left" @click="back"></i>
             <span class="search_header_font">查询商品</span>
             <span>{{chaxun}}</span>
     </div>
     <el-input placeholder="请输入要查询的商品" v-model="goodsinput" size="large" clearable class="search_input"></el-input>
     <button @click="cha">查询</button>

<li class="goods" v-for="(item,index) in goodslist" :key=index @click="todetails(index)">

    <img :src="item.img" alt="">
      <p>{{item.goods_name}}</p>
      <p class="goodfont"><span class="goodfont1"><i class="el-icon-coin"></i>{{item.cos}}</span><span  class="goodfont2">剩余：{{item.extra}}个</span></p>

    </li>   
    

  </div>
</template>

<script>
export default {
    data:function(){
        return{
            goodsinput:"",
            goods_input:"",
            
            goodslist:[]

        }
    },


    computed:{
      chaxun: function(){
        var a;
        var a="%"+this.goodsinput+"%";
        this.goods_input=a;
        return a;
        
    },

    },
    methods:{
        back:function(){
            this.$router.go(-1)
        },
        todetails:function (index) {
         this.$router.push({  
            path: '/Details',   
            name: 'Details',  
            params: {   
              
                indexs:index,
                goodslist:this.goodslist

            }  
            
        })  
    },
  cha:function(){

           //查询商品
          console.log(this.goods_input)
        this.$http.get('/api/users/'+this.goods_input).then(({
            data,config
        })=>{
            console.log(data,config);
            if(data.code==200){
                console.log('商品查询成功');
                console.log("我是返回对象"+data);
                this.goodslist=data.data;
            }else{
                console.log('商品查询失败');
            }
        })

    }
      
    
    },
    // mounted:function(){
     

    // }

}
</script>

<style scoped>
#search_header{
    height: 80px;
    
    
    display: flex;
    align-items: center;
}
.search_header_font{
    font-size: 35px;margin-left: 260px;
    font-weight: bold;
    margin-left: 3.46667rem;
 
}
*{
  padding: 0;
  margin: 0;
}
.goodfont{
  margin-top: 5px;
}
.goodfont1{
   font-size: 40px;
   color: orange;
}
.goodfont2{
   font-size: 5px;
   float:right;
   margin-top: 20px;  
}
.goods img{
  width: 98%;
}
.goods{
  width: 44%;
  list-style-type: none;
  border: 1px solid rgb(202, 193, 193);
  border-radius: 10px;
  padding:10px 10px 10px 10px;
  margin: 10px 10px 10px 10px;
  display: inline-block;
  

}



</style>